<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.css" rel="stylesheet">
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script> -->
</head>

<body>
    <div class="container">
        <h2 class="page-header">Promise初体验</h2>
        <button class="btn btn-primary" id="btn"> 点击中奖</button>
    </div>
    <script>
        // 生成随机数
        function rand(m, n) {
            return Math.ceil(Math.random() * (n - m + 1)) + m - 1;
        }
        /**
         * 点击按钮，2s后显式是否中奖（30%概率中奖）
         *      若中奖弹出      恭喜恭喜，奖品为10WRMB 劳斯莱斯优惠券
         *      若未中奖弹出    再接再厉
         * 
        */
        // 获取元素对象
        const btn = document.querySelector('#btn');
        // 绑定单击事件
        btn.addEventListener('click', function () {
            // // 定时器
            // setTimeout(() => {
            //     // 30% 1-100 1 2 30
            //     // 获取从1-100的一个随机数
            //     let n = rand(1,100);
            //     // 判断
            //     if(n <= 30){
            //         alert('恭喜恭喜，奖品为10WRMB 劳斯莱斯优惠券');
            //     }else{
            //         alert('再接再厉');
            //     }
            // }, 1000)

            // Promise  形式实现
            // resolve  解决    函数类型数据
            // reject   拒绝    函数类型数据
            const p = new Promise((resolve, reject) => {
                setTimeout(() => {
                    // 30% 1-100 1 2 30
                    // 获取从1-100的一个随机数
                    let n = rand(1, 100);
                    // 判断
                    if (n <= 30) {
                        resolve(n);  //将 Promise对象的状态设置为[成功]
                    } else {
                        reject(n);   //将 Promise对象的状态设置为[失败]
                    }
                }, 1000)
            });
            console.log(p);
            // 调用then方法
            p.then((value) => {
                alert('恭喜恭喜，奖品为10WRMB 劳斯莱斯优惠券 您的中奖数字为' + value);
            }, (reason) => {
                alert('再接再厉,您的号码为' + reason);
            })
        })

    </script>
</body>

</html>